<template>
  <div>
    <div class="page-header col-xs-offset-2 col-xs-8">
      <h2>Vue路由测试</h2>
    </div>
    <!-- 导航区域 -->
    <div class="col-xs-2 col-xs-offset-2">
      <router-link
        class="list-group-item"
        active-class="active"
        :to="{ name: 'About', query: { color: 'pink', abc: 'xxxx' } }"
      >
        About
      </router-link>
      <router-link class="list-group-item" active-class="active" to="/home">
        Home
      </router-link>
    </div>
    <!-- 展示区 -->
    <div class="col-xs-6 panel-body">
      <!-- 
        缓存组件 -> 通常用来缓存路由组件  
          max 最大缓存组件数量
          include 只缓存哪些组件
          exclude 不缓存哪些组件
      -->
      <keep-alive :max="10" include="AboutComp,HomeComp">
        <router-view />
      </keep-alive>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style></style>
